<template>
  <div class="sort">
    <div class="search">
      <search
     v-model="value"
     show-action
     placeholder="板鞋男"
     shape="round"
     @search="onSearch"
>
 <template #left>
  <config-provider :theme-vars="themeVars">
  <Button type="default" :to="'/'">
    <icon name="arrow-left" />
  </Button>
</config-provider>
  </template>
  <template #action>
    <div @click="onClickButton">搜索</div>
  </template>
</search>
</div>
<div class="xia">
  <config-provider :theme-vars="themeVars">
  <sidebar v-model="selectIndex">
      <sidebar-item
        :title="item.name"
        v-for="item in categories"
        :key="item.id"
        :to="{ name: 'Sort', query: { tid: item.id } }"
      />
    </sidebar>
  </config-provider>
<div class="products">
  <List
        :loading="loading"
        :finished="finished"
        @load="loadData"
        finished-text="加载完成"
      >
      <div  v-for="i in products">
        <config-provider :theme-vars="themeVars">
       <grid :column-num="3">
            <grid-item :icon="i.imgs" :text="i.name" />
            <grid-item :icon="i.imgs" :text="i.name" />
            <grid-item :icon="i.imgs" :text="i.name" />
      </grid>
    </config-provider>
      </div>
</List>
</div>

  </div>
</div>
</template>
<script setup>
import { Search,Icon ,Sidebar, SidebarItem,Grid, GridItem, List,Button} from 'vant';
import { ConfigProvider } from 'vant';
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import {
  loadProductCategoriesAPI,
  loadProductsAPI2
} from "../services/product";
import { ref } from "vue";
const router = useRouter();
const route = useRoute();
const value=ref('');
const selectIndex = ref(0); // 左侧导航选中的索引
const tid = ref(route.query.tid); // 分类id
const loading = ref(false); // 当loading为true的时候，触底之后会触发load事件
const finished = ref(false);
const categories = ref([]); // 分类
const products = ref([]);//商品数据

const loadData = () =>console.log('加载');
const onSearch=()=>console.log('搜索');
const themeVars = {
      sidebarSelectedBorderColor:'#FFC731',
      gridItemIconSize:'4rem',
      buttonDefaultBorderColor:'transparent'
    };
//加载对应类型的数据
const loadDataFromServer = () => {
  loading.value = true; // 开始加载数据
  loadProductsAPI2(selectIndex.value+1).then((res) => {
    products.value.push(...res.data);
    loading.value = false; // 加载完成
  });
};
// 获取商品类型信息
loadProductCategoriesAPI().then((res) => {
  categories.value = res.data;
  // 获取完分类之后，根据url中的参数 设置侧边栏选中的效果
  selectIndex.value = categories.value.findIndex(
    (item) => item.id == tid.value
  );
 if(selectIndex.value<0){
  selectIndex.value=0;
 }
});
// 路由切换，但是组件被复用的时候使用
onBeforeRouteUpdate((to, from) => {
  tid.value = to.query.tid; // 在路由跳转的时候修改tid的值
  // 页面切换之后，设置选中的左侧导航
  selectIndex.value = categories.value.findIndex(
    (item) => item.id == tid.value
  );
  console.log(selectIndex.value);
  finished.value = false;
  products.value = [];
  loadDataFromServer();
});
loadDataFromServer();
</script>
<style scoped>
  .xia{
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: auto;
  }
  .products {
  flex: 1;
  overflow: auto;
}
  .sort{
    display: flex;
    flex-direction: column;
  }
  h3{
    text-indent: 20px;
    line-height: 65px;
    text-align: left;
  }
</style>